<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            display: flex;
            list-style: none;
        }
    </style>
</head>

<body>
    <h3>玩家1:</h3>
    <ul id='playerA'></ul>
    <h3>玩家2:</h3>
    <ul id='playerB'></ul>
    <h3>玩家3:</h3>
    <ul id='playerC'></ul>
    <h3>底牌:</h3>
    <ul id='playerDef'></ul>

    <script src="../tools.js"></script>
    <script>
        const number = ['3', '4', '5', '6', '7', '8', '9', '10', "J", "Q", "K", "A", '2'];
        const flower = ["♠️", "♥️", "♣️", "♦️"]; // 黑桃 < 红心 < 梅花 < 方块

        function init() {
            // 54 牌
            let arr = [];
            let num = 1;
            for (let n = 0; n < number.length; n++) {
                for (let f = flower.length - 1; f >= 0; f--) {
                    let obj = {
                        str: flower[f] + number[n],
                        number: n,
                        flower: f,
                        url: `../img/poker/pkp_${num++}.jpg`
                    };
                    arr.push(obj);
                }
            }
            arr.push({
                str: '小王',
                number: 53,
                url: `../img/poker/pkp_53.jpg`
            }, {
                str: '大王',
                number: 54,
                url: `../img/poker/pkp_54.jpg`
            });
            // console.log(arr);

            // 打乱
            let s = new Set();
            while (s.size < 54) {
                s.add(random(53));
            }
            let randomIndexArr = [...s]; // 乱序的作为下标的数组 [2,6,18]

            arr = randomIndexArr.map(item => arr[item]); // 乱序后的牌

            // 分发
            let player1 = arr.slice(0, 17);
            let player2 = arr.slice(17, 34);
            let player3 = arr.slice(34, 51);
            let def = arr.slice(51);

            return [player1, player2, player3, def];
        }
        let [player1, player2, player3, def] = init();

        // 排序
        function sort(arr) {
            arr.sort((a, b) => {
                if (a.number == b.number) {
                    return a.flower - b.flower;
                } else {
                    return a.number - b.number;
                }
            });
        }
        sort(player1);
        sort(player2);
        sort(player3);
        sort(def);

        // 渲染
        function render(arr, parentNode) {
            parentNode.innerHTML = arr.map(item => `<li style='margin-left: -40px;'><img src=${item.url}></li>`).join('');
        }
        render(player1, playerA);
        render(player2, playerB);
        render(player3, playerC);
        render(def, playerDef);

    </script>
</body>

</html>